<template>
  <div>
    <template v-if="isLeaf!='1'">
      <div class="menu_tree_body" v-for="(item ,index) in treeData" :key="index">
        <template v-if="item.nodeLeaf!='1'">
          <div class="menu_tree_other">{{item.nodeName}}</div>
          <treeTemplate :tree-data="item.children" :is-leaf="item.children[0].nodeLeaf"/>
        </template>
      </div>
    </template>
    <template v-if="isLeaf=='1'" >
      <div class="menu_leaf" v-for="(jtem ,ind) in treeData" :key="ind" @click="addCardClick(jtem.nodeName)">{{jtem.nodeName}}</div>
    </template>

  </div>


</template>

<script>
  import {personInfo, objectOption, timeOption} from "../../../../utils/dataInfo/personInfo";
  export default {
    props: ['treeData', 'isLeaf','value'],
    name: "treeTemplate",
    data() {
      return {
          msg: 'hello vue',
          addCardList: [],
          clicCounts: 0
        }
    },
    created() {
      // let parent =this.$parent
      // while(parent)

    }, components: {},
    methods: { 
      addCardClick(val) {
        console.log(this.value)
        this.clicCounts += 1;
        if(val !== '号码') return;
        if(personInfo.length >= this.clicCounts) {
          this.addCardList.push(personInfo[this.clicCounts -1]);
        }
        this.$parent.$emit('getChildrenData',this.addCardList)
        console.log("新数组",this.addCardList)
      }
     }
  }
</script>

<style scoped>

</style>
<style lang="less">
  .menu_tree_body {
    display: flex;
    /*flex-direction: column;*/

    .menu_tree_other {
      /*background-color: pink;*/
      width: 12rem;
      height: 2rem;
      font-size: 1rem;
      float: left;
      border-right: .15rem solid #a3bcdf;
      margin: 1rem;
      font-weight: 700;
    }

    .menu_leaf {
      display: inline-block;
      height: 3rem;
      font-size: 1rem;
      line-height: 3rem;
      padding: 0 .8rem;
      float: left;
      cursor: pointer;
    }
  }
</style>
